<html>
<head>
<title>r2core.js shell</title>
  <link rel="stylesheet" type="text/css" href="../style.css">
<meta name="viewport" content="width=320, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=false" />
</head>
<script src="./r2core.js">
</script>
<script>
var r2 = {};
r2.cmd = Module.cwrap('r2_asmjs_cmd', 'string', ['number', 'string']);
r2.openurl = Module.cwrap('r2_asmjs_openurl', 'void', ['number', 'string']);

var cmds = new Array();
var hist = new Array();
var yrotsih = new Array();

function runCommand() {
	var input = document.getElementById('input');
	var output = document.getElementById('output');
	if (input.value !== '') {
		hist.push(input.value);
	}
	var res = r2.cmd (0, input.value);
	input.value = '';
	for (var c of cmds) {
		res += "\n[>] " + c + "\n";
		res += r2.cmd (0, c);
	}
	output.innerText = res;
}

function addCommand() {
	var input = document.getElementById('input');
	cmds.push(input.value);
	input.value = '';
	runCommand();
}

function openURL() {
	var url = document.getElementById('url');
	r2.openurl(0, url.value);
}

function histUp() {
	if (hist.length > 0) {
		var input = document.getElementById('input');
		input.value = hist[hist.length - 1];
		yrotsih.push(hist.pop());
	}
}

function histDown() {
	if (yrotsih.length > 0) {
		var input = document.getElementById('input');
		input.value = yrotsih[yrotsih.length - 1];
		hist.push(yrotsih.pop());
	}
}

document.addEventListener('DOMContentLoaded', function () {
	r2.cmd(0, "e scr.html=true");
	r2.cmd(0, "e scr.utf8=true");
	r2.cmd(0, "e scr.color=false");
	var add = document.getElementById('add');
	add.addEventListener('click', addCommand);
	var run = document.getElementById('run');
	run.addEventListener('click', runCommand);
	var input = document.getElementById('input');
	input.onkeypress = function(e){
		if (e.keyCode == 13) {
			runCommand();
		} else if (e.keyCode == 38) {
			histUp();
		} else if (e.keyCode == 40) {
			histDown();
		}
        }
	var open = document.getElementById('open');
	open.addEventListener('click', openURL);
	var url = document.getElementById('url');
	url.onkeypress = function(e){
		if (e.keyCode == 13) {
			openURL();
		}
        }
});
</script>

<style>
.prompt {
	position: fixed;
	top: 0px;
	padding-top:5px;
	padding-left:10px;
	padding-bottom: 5px;
	left:0px;
	border:15px;
	width:100%;
	background-color: #303030;
}
.shell {
	margin-top: 5em;
	font-family: monospace !important;
	line-height: 90%;
	display: block !important;
	white-space: pre;
	background-color:black;
	color:white;
}
input {
	background-color:black;
	color:white;
	border: solid 1px gray;
}
body {
	font-family:Verdana;
	background-color:black;
	color:gray;
}

</style>

<body>
<div class="prompt" style="width:100%">
URL
<input id="url" value="http://cloud.rada.re/asmjs/ls" style="width:70%">
</input>
<input id="open" type="button" value="open">
</input>
<br />
CMD
<input id="input" value="?V" style="width:70%">
</input>

<input id="run" type="button" value="run">
</input>
<input id="add" type="button" value="add">
</input>
</div>

<div id="output" class="shell">
</div>
</body>
</html>
